/**
 * Adapted from https://github.com/AllenFang/react-bootstrap-table/blob/master/css/react-bootstrap-table.css
 */

/*editor error animate*/

.react-bs-table{
  margin-bottom: 37px;
}
.react-bs-table .table-header{
  height: 42px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(221, 221, 221);
  border-bottom-width: 0px;
  border-bottom-style: solid;
  border-bottom-color: rgb(221, 221, 221);
}

.react-bs-table .table-header > table{
  table-layout: fixed;
  border-top-style: hidden;
}

.react-bs-table .table-header > table > thead > tr{
  border-bottom-style: hidden;
}

.react-bs-table .table-header > table > thead > tr > th .table-header-column{
  line-height: 25px
}

.react-bs-table .table-header > table > thead > tr > .sort-column{
  cursor: pointer;
}

.react-bs-table .table-container{
  overflow-x: auto;
  overflow-y: auto;
  height: 100%;
}

.react-bs-table .table-container > table{
  margin-top: -2px;
  table-layout: fixed;
  margin-bottom: 0px;
}

.react-bs-container .tool-bar{
  margin-bottom: 5px
}

.react-bs-container {
  .dropdown {
    display:none;
  }
  /* Yes this is terrible */
  .col-md-6 {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*inline editor default style*/
.react-bs-table .form-control.editor{
  width:100%;
  top:0;
  left:0;
  height: 100%;
  position: absolute;
}

.react-bs-table  .textarea-save-btn{
  position: absolute;
  z-index: 100;
  #{direction(right)}: 0;
  top: -21px;
}


/*error tip style*/
.animated {
  animation-fill-mode: both;
}

.animated.bounceIn,
.animated.bounceOut{
  animation-duration: .75s;
}
.animated.shake{
  animation-duration:.3s;
}
@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%,  50%,  90% {
    transform: translate3d(-10px, 0, 0);
  }

  30%, 70%{
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  animation-name: shake;
}
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-name: bounceIn;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  animation-name: bounceOut;
}

/**
 * THIS SECTION IS THE PAGINATION COMPONENT FROM BOOTSTRAP
 */

.pagination {
  display: inline-block;
  padding-#{direction(left)}: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-#{direction(left)}: -1px;
  line-height: 1.42857143;
  color: #337ab7;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-#{direction(left)}: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}